<template>
  <div class="InspectListCom">
    <jxtech-page-table ref="InspectListTableRef" row-key="ruleCode" fit="full" :table-column="InspectListComState.tableColumn"
                       :load-data="InspectListComState.loadData" :exp-data="InspectListComState.expData"
                       @selection-change="InspectListComState.tableSelectionChange">
      <template #header>
        <div class="jxtech-page-table-header-flex">
          <jxtech-search-form :query-column="InspectListComState.queryColumn" :query-form="InspectListComState.queryParam" :col-span="6"
                              @handle-search="InspectListComState.handleSearch">
            <template #customQueryYear>
              <!-- <el-date-picker v-model="InspectListComState.date" format="YYYY 年 MM 月 DD 日" value-format="YYYY-MM-DD" type="daterange"
                              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="InspectListComState.datechangehandler">
              </el-date-picker> -->
            </template>
          </jxtech-search-form>
        </div>
      </template>
      <template #ratioSlot="{row}">
        {{row.ratio}}%
      </template>

      <template #actionSlot="{ row }">
        <el-button type="" @click="InspectListComState.detailhandler(row)">
          <jxtech-svg-icon icon="#icon-detail" class="pointer"></jxtech-svg-icon>&nbsp;详 情
        </el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="danger" @click="InspectListComState.deletehandler(row)">
          <jxtech-svg-icon icon="#icon-delete" class="pointer"></jxtech-svg-icon>&nbsp;删 除
        </el-button>
      </template>

    </jxtech-page-table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue"
import { inspectServiceApi } from "/@/api/personnel/bean/inspect"
import { ElNotification, ElMessageBox, ElMessage } from "element-plus"
import { InspectDetailUrl } from "/@/views/personnel/mapping.json"
import { useRouter } from "vue-router"
import path from "path/posix"
const router = useRouter()
const InspectListTableRef = ref()
const InspectListComState = reactive({
  handleSearch: () => InspectListTableRef.value.loadTable(),
  queryColumn: [
    {
      name: "ruleCode",
      type: "input",
      label: "规则编码",
      placeholder: "规则编码"
    }
    // {
    //   name: "starttime",
    //   type: "custom",
    //   label: "年份",
    //   slot: "customQueryYear"
    // },
    // { name: "endtime", hidden: true }
  ],
  // queryParam: { likeAll: null, starttime: "", endtime: "" },
  queryParam: { likeAll: null },
  selectionData: [] as any[],
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "50", type: "index" },
    { prop: "ruleImportant", label: "重要程度" },
    { prop: "ruleCode", label: "规则编码" },
    { prop: "systemName", label: "系统名称" },
    { prop: "ruleName", label: "校验规则" },
    { prop: "ruleTableCh", label: "校验表中文名" },
    { prop: "ruleTableEn", label: "校验表名" },
    { prop: "ruleColCh", label: "校验字段中文名" },
    { prop: "ruleColEn", label: "校验字段名" },
    { prop: "totalNum", label: "总记录数" },
    { prop: "problemNum", label: "问题数" },
    { prop: "ratio", label: "数据达标率", slot: "ratioSlot", width: "100" },
    { prop: "checkDate", label: "检查日期", width: "200" },
    { label: "操作", slot: "actionSlot", width: "200" }
  ],
  //表格数据加载的方法
  loadData: (params: any) => {
    return inspectServiceApi.queryPage(
      { refCols: "default" },
      {
        ...params,
        ...InspectListComState.queryParam
      }
    )
  },
  expData: (params: any) => {
    // return rulelibraryServiceApi.exportData(null, {
    //   ...params,
    //   ...InspectListComState.queryParam
    // })
  },
  tableSelectionChange: (dataList: any[]) => {
    InspectListComState.selectionData = dataList
  },
  deletehandler: (row: any) => {
    ElMessageBox.confirm("您确定要删除选择的数据么?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        inspectServiceApi.delete(row.ruleCode, null).then(response => {
          ElNotification({
            title: "删除成功",
            message: "规则编码-" + row.ruleCode,
            type: "success"
          })
          InspectListTableRef.value.loadTable()
        })
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
  },
  detailhandler: (row: any) => {
    router.push({ path: InspectDetailUrl, query: { ruleCode: row.ruleCode } })
  },
  multideletehandler: () => {
    if (!InspectListComState.selectionData.length) {
      return ElNotification({
        title: "错误",
        message: "没有选择任何数据",
        type: "error"
      })
    }
    ElMessageBox.confirm("您确定要删除选择的数据么?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        const idsarray: string[] = []
        InspectListComState.selectionData.forEach(item => {
          idsarray.push(item.ruleCode)
        })
        inspectServiceApi.saveMultiDelete(idsarray, null).then(response => {
          ElNotification({
            title: "删除成功",
            message: "ruleCode-" + idsarray,
            type: "success"
          })
          InspectListTableRef.value.loadTable()
        })
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
  },
  datechangehandler(value: any) {
    console.log(value)

    // if (value) {
    //   parameterdata.startTime = value[0]
    //   parameterdata.endTime = value[1]
    // } else {
    //   parameterdata.startTime = ""
    //   parameterdata.endTime = ""
    // }

    // console.log(parameterdata)
  }
})
onMounted(() => {
  InspectListTableRef.value.loadTable()
})
defineExpose({
  exposemultideletehandler: () => InspectListComState.multideletehandler()
})
</script>

<style lang="scss" scoped>
</style>
